<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <title>Dorm · Order</title>


    

    <!-- Bootstrap core CSS -->
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      .container {
        max-width: 960px;
      }


      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>

  </head>

  <body class="bg-light"> 
    <header>
      <%- include('./navbar.html'); %>
    </header>  
    <div class="container">
    <main>
        <div class="py-5 text-center">
        <h2>Checkout form</h2>
        <p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
        </div>

        <div class="row g-5">
        <div class="col-md-7 col-lg-8">
            <h4 class="mb-3">Order details</h4>
            <form action="/order" method="post" class="needs-validation" novalidate>
              <input type="hidden" name="uid" value=<%=uid%>>
              <div class="row g-3">
                  <div class="col-sm-6">
                  <label for="name" class="form-label">Name</label>
                  <input type="text" class="form-control" id="name" name="name" placeholder="" value=<%=name%> readonly="readonly">
                  <div class="invalid-feedback">
                      Valid name is required.
                  </div>
                  </div>
  
                  <div class="col-sm-6">
                  <label for="studentID" class="form-label">Student ID</label>
                  <input type="text" class="form-control" id="studentID" name="studentID" placeholder="" value=<%=studentID%> readonly="readonly">
                  <div class="invalid-feedback">
                      Valid studentID is required.
                  </div>
                  </div>

                <div class="col-md-5">
                <label for="dorm" class="form-label">Dorm</label>
                <select class="form-select" id="dorm" name="dorm" required>
                    <option value="">Choose...</option>
                    <option value="1">Dorm 1</option>
                    <option value="2">Dorm 2</option>
                </select>
                <div class="invalid-feedback">
                    Please select a valid dorm.
                </div>
                </div>

                <div class="col-md-4">
                <label for="unit" class="form-label">Unit</label>
                <select class="form-select" id="unit" name="unit" required>
                    <option value="">Choose...</option>
                    <option value="1">Unit1</option>
                    <option value="2">Unit2</option>
                </select>
                <div class="invalid-feedback">
                    Please provide a valid unit.
                </div>
                </div>

                <div class="col-md-3">
                <label for="unit" class="form-label">roommate</label>
                <select class="form-select" id="num" name="num" required>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
                <div class="invalid-feedback">
                    Please provide a valid number of roommates.
                </div>
                </div>
            </div>

            <hr class="my-4">

            <h4 class="mb-3">Roomates Information</h4>
            <div id="all-info">
                <div class="row gy-3" id="info1">
                <div class="col-md-6">
                <label for="name" class="form-label">Name</label>
                <input type="text" class="form-control" id="name" name="infoname" placeholder="" required>
                <!-- <small class="text-muted">Full name as displayed on card</small> -->
                <div class="invalid-feedback">
                    Name is required
                </div>
                </div>

                <div class="col-md-6">
                <label for="studentID" class="form-label">studentID</label>
                <input type="text" class="form-control" id="studentID" name="infostudentid" placeholder="" required>
                <div class="invalid-feedback">
                    StudentID is required
                </div>
                </div>
                </div>
            </div>
            

            <hr class="my-4">

            <button class="w-100 btn btn-primary btn-lg" type="submit">Continue to checkout</button>
            </form>
        </div>
        </div>
    </main>

    </div>

    <script src="/bootsrap/js/bootstrap.bundle.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script src="/javascripts/form-validation.js"></script>
    <script src="/javascripts/order.js"></script>
  </body>
</html>
